DisplayCityList();
CheckSchool();
CheckSchoolActive();
AddSchoolActive();
ClickDep();
DelSchoolAction(); //删除活动
ChangeSchoolAction(); //修改活动
FuYuanActive();
$("#name")[0].onblur = CheckInputTextN; //输入活动名称提示
$("#place")[0].onblur = CheckInputTextP; //输入活动地点提示
$("#theme")[0].onblur = CheckInputTextT; //输入主题提示
var Sid;
/*无序列表里面显示城市*/
function DisplayCityList() {
    $("#city").html("");
    var cityArr = JSON.parse(localStorage.getItem("cityArr"));
    for (var i = 0; i < cityArr.length; i++) {
        $("#city").append(`<li data-id="${cityArr[i].cityId}">${cityArr[i].cityName}</li>`);
    }
}
/*点击城市出现对应的学校*/
$("#city li:first-child").click(); //默认显示第一个城市的学校信息
function CheckSchool() {
    $("#city").on("click", "li", function() {
        $("#schoolList").html("");
        var CityID = $(this).attr("data-id"); //获取用户选择的城市的ID
        var schoolArr = JSON.parse(localStorage.getItem("schoolArr"));
        for (var i = 0; i < schoolArr.length; i++) {
            if (CityID == schoolArr[i].cityId) {
                $("#schoolList").append(`<tr>
                            <td>${schoolArr[i].schoolName}</td>
                            <td>${schoolArr[i].headmaster}</td>
                            <td>${schoolArr[i].time}</td>
                            <td>${schoolArr[i].phone}</td>
                            <td><button type="button" class="btn btn-default " data-toggle="modal"  data-target="#myModal" data-id="${schoolArr[i].id}" id="Check">查看</button></td>
                        </tr>`);
            }
        }
    })
}
/*查看学校活动的点击事件*/
function CheckSchoolActive() {
    $("#schoolList").on("click", "#Check", function() {
        //弹出模态框
        $('#myModal').on('shown.bs.modal', function() {
            $('#myInput').focus();
        })
        $(".activeList").html("");
        /*获取当前点击的这个学校的id*/
        var schoolId = $(this).attr("data-id");
        Sid = schoolId;
        /*判断当前点击的这个学校的id和活动数组的id是否一致*/
        var activeArr = JSON.parse(localStorage.getItem("activeArr"));
        for (var i = 0; i < activeArr.length; i++) {
            //如果当前点击的这个学校的id等于活动数组的id，就将该活动信息加入表格
            if (schoolId == activeArr[i].id) {
                $(".activeList").append(`<tr>
                            <td>${activeArr[i].activeName}</td>
                            <td>${activeArr[i].time}</td>
                            <td>${activeArr[i].place}</td>
                            <td>${activeArr[i].theme}</td>
                            <td>${activeArr[i].depName}</td>
                            <td>${activeArr[i].eName}</td>
                            <td><button type="button" class="btn btn-success ChangeAction" data-id="${activeArr[i].activeId}">修改</button><button type="button" class="btn btn-primary DelAction" data-id="${activeArr[i].activeId}">删除</button></td>
                        </tr>`);
            }
        }
    })
}
/*添加学校活动的点击事件*/
function AddSchoolActive() {
    $("#addition").click(function() {
        var depArr = JSON.parse(localStorage.getItem("depArr"));
        var employeeArr = JSON.parse(localStorage.getItem("employeeArr"));
        var activeArr = JSON.parse(localStorage.getItem("activeArr"));
        $("#activeList").html("");
        /*清空模态框里面表格的内容*/
        $("#table").text("");
        /*清空模态框里面尾部的按钮*/
        $("#footer_button").text("");
        $("#footer_button").append(` <button type="button" class="btn btn-info" id="btn_AddAction" data-dismiss="modal">添加</button><button type="button" class="btn btn-default" data-dismiss="modal">取消</button>`);
        $("h4").text("添加活动");
        /*点击添加按钮过后，添加活动内容显示*/
        $("#AddAction").css("display", "block");
        /*将添加活动的内容加入模态框*/
        $("#modal_content .modal-body").append($("#AddAction"));
        /*人事部门的数据传入下拉列表*/
        for (var i = 0; i < depArr.length; i++) {
            $("#AddAction #dep").append(`<option>${depArr[i].depName}</option>`);
        }
        /*添加活动的按钮的点击事件*/
        $("#footer_button").on("click", "#btn_AddAction", function() {
            var Name = $("#AddAction #name").val();
            var Time = $("#AddAction #time").val();
            var Place = $("#AddAction #place").val();
            var Theme = $("#AddAction #theme").val();
            var Dep = $("#dep")[0].selectedIndex;
            var Employee = $("#employee")[0].selectedIndex;
            var Active = {
                id: Sid,
                activeId: activeArr.length + 2,
                activeName: Name,
                time: Time,
                place: Place,
                theme: Theme,
                depName: depArr[Dep].depName,
                eName: employeeArr[Employee].eName
            }
            activeArr.push(Active);
            localStorage.setItem("activeArr", JSON.stringify(activeArr));
            console.log(Dep);
        })
    })
}
/*点击部门出现对应的部门人员*/
function ClickDep() {
    $("#dep").on("change", function() {
        $("#employee").html("");
        var employeeArr = JSON.parse(localStorage.getItem("employeeArr"));
        var DepId = (this.selectedIndex + 1).toString(); //获取当前点击的这个负责部门的id
        for (var i = 0; i < employeeArr.length; i++) {
            /*判断当前点击的负责部门的id是否和负责人数组里面的部门id相同*/
            if (DepId == employeeArr[i].eDepId) {
                $("#AddAction #employee").append(`<option data-id="${employeeArr[i].eId}">${employeeArr[i].eName}</option>`);
            }
        }
    })
}
/*删除学校活动*/
function DelSchoolAction() {
    $(".activeList").on("click", ".DelAction", function() {
        var activeArr = JSON.parse(localStorage.getItem("activeArr"));
        $(this).parent().parent().remove();
        var ActiveId = $(this).attr("data-id") - 1;
        activeArr.splice(ActiveId, 1);
        localStorage.setItem("activeArr", JSON.stringify(activeArr));
        console.log(activeArr);
    })
}
/*修改学校活动*/
function ChangeSchoolAction() {
    $(".activeList").on("click", ".ChangeAction", function() {
        var depArr = JSON.parse(localStorage.getItem("depArr"));
        var employeeArr = JSON.parse(localStorage.getItem("employeeArr"));
        var activeArr = JSON.parse(localStorage.getItem("activeArr"));
        var ActiveId = $(this).attr("data-id") - 1;
        /*清空模态框里面表格的内容*/
        $("#table").text("");
        /*清空模态框里面尾部的按钮*/
        $("#footer_button").text("");
        $("#footer_button").append(` <button type="button" class="btn btn-info" id="btn_changeActive" data-dismiss="modal">确定</button><button type="button" class="btn btn-default" data-dismiss="modal">取消</button>`);
        $("h4").text("修改活动");
        /*点击添加按钮过后，添加活动内容显示*/
        $("#AddAction").css("display", "block");
        /*将添加活动的内容加入模态框*/
        $("#modal_content .modal-body").append($("#AddAction"));
        $("#AddAction #name").val(activeArr[ActiveId].activeName);
        $("#AddAction #time").val(activeArr[ActiveId].time);
        $("#AddAction #place").val(activeArr[ActiveId].place);
        $("#AddAction #theme").val(activeArr[ActiveId].theme);
        /*人事部门的数据传入下拉列表*/
        for (var i = 0; i < depArr.length; i++) {
            $("#AddAction #dep").append(`<option data-id="${depArr[i].depId}">${depArr[i].depName}</option>`)
        }
        /*修改活动的按钮的点击事件*/
        $("#footer_button").on("click", "#btn_changeActive", function() {
            var Name = $("#AddAction #name").val();
            var Time = $("#AddAction #time").val();
            var Place = $("#AddAction #place").val();
            var Theme = $("#AddAction #theme").val();
            var Dep = $("#dep")[0].selectedIndex;
            var Employee = $("#employee")[0].selectedIndex;
            var Active = {
                id: parseInt(Sid),
                activeId: ActiveId + 1,
                activeName: Name,
                time: Time,
                place: Place,
                theme: Theme,
                depName: depArr[Dep].depName,
                eName: employeeArr[Employee].eName,
            }
            activeArr.splice(ActiveId, 1, Active);
            localStorage.setItem("activeArr", JSON.stringify(activeArr));
            console.log(activeArr);
        })
    })
}

//模态框bug 
/*所有按钮点击过后*/
function FuYuanActive() {
    $("#myModal").on("click", "button", function() {
        /*清空模态框里面表格的内容*/
        $("#modal_content .modal-body").text("");
        /*清空模态框里面尾部的按钮*/
        $("#footer_button").text("");
        $("#footer_button").append(` <button type="button" class="btn btn-info"  id="addition">添加</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>`);
        $("h4").text("活动记录一览");
        $("#myTable").css("display", "block");
        $("#modal_content .modal-body").append($("#myTable"));
        $('.modal-backdrop').remove();
    })
}
/*输入框提示*/
function CheckInputTextN() {
    if ($("#name").val() == "") {
        $("#name")[0].nextElementSibling.innerText = "请输入活动名称";
        $("#name")[0].nextElementSibling.style.color = "red";
    }

}

function CheckInputTextP() {
    if ($("#place").val() == "") {
        $("#place")[0].nextElementSibling.innerText = "请输入活动地点";
        $("#place")[0].nextElementSibling.style.color = "red";
    }
}

function CheckInputTextT() {
    if ($("#theme").val() == "") {
        $("#theme")[0].nextElementSibling.innerText = "请输入主题";
        $("#theme")[0].nextElementSibling.style.color = "red";
    }
}